<style lang="less">
	.comment,.like{
    font-size: 12px;
    i{
      font-size: 16px;
      margin-right: 5px;
    }

  }
  .img-source{
    position: absolute;
    color:#fff;
    right: 20px;
    bottom: 10px;
    margin: 0;
    font-size: 12px;
  }
</style>
<template>
	<div class="news-detail">
	    <header class="header">
	      <a @click="prevPage"><i class="fa fa-arrow-left"></i></a>
	      <div class="interact-column right">
	        <span class="share"><i class="fa fa-share-alt"></i></span>
	        <span class="enshrine"><i class="fa fa-star"></i></span>
	        <router-link :to="'/comments/'+this.$route.params.id" class="comment"><i class="fa fa-commenting"></i>{{comments}}</router-link>
	        <span class="like"><i class="fa fa-thumbs-up"></i>{{popularity}}</span>
	      </div>
	    </header>
	    <router-view></router-view>
    </div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
  export default {
    name:'news-detail',
    data() {
      return {

      }
    },
    computed:mapState({
      comments: state => state.newsExtra.comments,
      popularity: state => state.newsExtra.popularity
    }),
    methods:{
      prevPage() {
        this.$router.go(-1)
        this.$store.commit('CHANGE_TRANSITION')
      },
    },
    created() {
      let id = this.$route.params.id;
      this.$store.dispatch('getData',{
        url:'/api/4/story-extra/'+ id,
        mutation: 'GET_NEWS_EXTRA'
      });
    },
    mounted() {


    }
  }
</script>
